<template>
  <main class="supplier-system">
    <div class="pc-width system">
      <p class="header"><span class="h1">第4页</span></p>
      <!-- <a-form :form="form" @submit="handleSubmit"> -->
      <!-- <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="姓名" class="form-item mt60">
          <a-input v-decorator="['username',{initialValue: formData.username || '', rules: [{ required: true, message: '姓名不能为空!' }]}]" placeholder="姓名" autocomplete="off" />
        </a-form-item>
        <a-form-item label="性别" class="form-item">
          <a-input v-decorator="['sex',{initialValue: formData.sex || ''}]" placeholder="性别" autocomplete="off" />
        </a-form-item>
        <a-form-item label="出生年月" class="form-item">
          <a-date-picker  v-decorator="['generateage',{ initialValue: formData.generateage || '',rules: [{ required: true, message: '出生年月不能为空!' }]}]"  placeholder="出生年月"  style="width: 100%" />
        </a-form-item>
        <a-form-item label="技术职称" class="form-item">
          <a-input v-decorator="['jszchen',{initialValue: formData.jszchen || ''}]" placeholder="技术职称" autocomplete="off" />
        </a-form-item>
        <a-form-item label="文化程度" class="form-item">
          <a-input v-decorator="['whcdu',{initialValue: formData.whcdu || ''}]" placeholder="文化程度" autocomplete="off" />
        </a-form-item>
        <a-form-item label="工作单位" class="form-item">
          <a-input v-decorator="['gzdanwei',{initialValue: formData.gzdanwei || ''}]" placeholder="工作单位" autocomplete="off" />
        </a-form-item>
        <a-form-item label="对成果创造性贡献" class="form-item">
          <a-input v-decorator="['cgczxgongxian',{initialValue: formData.cgczxgongxian || ''}]" placeholder="对成果创造性贡献" autocomplete="off" />
        </a-form-item>
        <a-form-item label="本人签字" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
              <a-input v-decorator="['benrenqzi_file',{ rules: [{ required: true, message: '本人签字!' }]}]" placeholder="联系电话" autocomplete="off" />
            </a-col>
            <a-col :span="4">
              <a-upload name="file" :multiple="true" action="" :headers="headers" >
                <a-button  type="primary" class="s-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <div class="supplier-footer">
          <a-button @click="goBack" class="s-btn">
            返回
          </a-button>
          <a-button class="s-btn">
            保存
          </a-button>
          <a-button @click="resetForm" class="s-btn">
            重填
          </a-button>
          <a-button  type="primary" @click="goNext" class="s-btn">
            继续
          </a-button>
        </div>
    </a-form> -->
      <h5 class="zyyz"><span>主要研制人员</span><a-button class="btn" type="primary" @click="add">新增</a-button></h5>
      <a-table :columns="columns" :data-source="list" :rowKey="selectTableKey">
        <template v-for="col in ['name', 'sex', 'jszchen','whcdu','gzdanwei','cgczxgongxian']" :slot="col" slot-scope="text, record, index">
          <div :key="col">
            <a-input v-if="record.editable" style="margin: -5px 0" :value="text" @change="e => handleChange(e.target.value, record.key, col, index)" />
            <template v-else>{{ text }}</template>
          </div>
        </template>
        <template slot="generateage" slot-scope="text, record,index">
          <div>
            <a-date-picker v-if="record.editable" format="YYYY-MM-DD"  placeholder="出生年月" :value="text" style="width: 100%"  @change="e => handleChange1(e, record,index)" />
            <template v-else>{{ text }}</template>
          </div>
        </template>
        <template slot="key" slot-scope="text, record">
          <div>
            <span v-if="record.editable">{{text}}</span>
            <span else>{{text}}</span>
          </div>
        </template>
        <template  slot="operation" slot-scope="text, record, index">
            <span v-if="record.editable">
              <a @click="() => saveTable(record, index)">保存</a>
                  <a-popconfirm title="确定取消?" @confirm="() => cancel(record, index)">
                    <a class="ml10">取消</a>
                  </a-popconfirm>
            </span>
            <span v-else>
              <a  @click="() => edit(record, index)">编辑</a>
            </span>
          <a class="ml10" @click="() => del(record, index)">删除</a>
        </template>
      </a-table>
      <div class="supplier-footer">
          <a-button @click="goBack" class="s-btn">
            返回
          </a-button>
          <a-button html-type="submit"  class="s-btn"  @click="save">
          <!-- <a-button html-type="submit" class="s-btn"> -->
            保存
          </a-button>
          <a-button @click="resetForm" class="s-btn">
            重填
          </a-button>
          <a-button  html-type="submit"  type="primary" @click="goNext" class="s-btn">
            继续
          </a-button>
        </div>
    </div>
  </main>
</template>
<script>
import { formatTimeAmt } from 'lib/until'
// import monent from "moment"
export default {
  data () {
    return {
      currentIndex: 0,
      form: this.$form.createForm(this),
      formId: '',
      formData: '',
      list: [],
      columns: [{
        title: '序号',
        dataIndex: 'key',
        width: 70,
        key: 'key',
        scopedSlots: { customRender: 'key' }
      }, {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        scopedSlots: { customRender: 'name' }
      }, {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        scopedSlots: { customRender: 'sex' }
      }, {
        title: '出生年月',
        dataIndex: 'generateage',
        key: 'generateage',
        width: 160,
        scopedSlots: { customRender: 'generateage' }
      }, {
        title: '技术职称',
        dataIndex: 'jszchen',
        key: 'jszchen',
        scopedSlots: { customRender: 'jszchen' }
      }, {
        title: '文化程度',
        dataIndex: 'whcdu',
        key: 'whcdu',
        scopedSlots: { customRender: 'whcdu' }
      }, {
        title: '工作单位',
        dataIndex: 'gzdanwei',
        key: 'gzdanwei',
        scopedSlots: { customRender: 'gzdanwei' }
      }, {
        title: '对成果创造性贡献',
        dataIndex: 'cgczxgongxian',
        key: 'cgczxgongxian',
        scopedSlots: { customRender: 'cgczxgongxian' }
      }, {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        width: 140,
        scopedSlots: { customRender: 'operation' }
      }],
      cacheData: {},
      enableAdd: 1
    }
  },
  components: {
  },
  computed: {
  },
  created () {
    if (this.$route.query.id) {
      this.formId = this.$route.query.id
      this.getKJCXFormDataById()
    }
  },
  methods: {
    goBack () {
      this.$router.push({ path: `/innovation/supplier/3?id=${this.formId}` })
    },
    goNext () {
      this.type = 1
      this.memberStepForm()
    },
    save () {
      this.type = 0
      this.memberStepForm()
    },
    selectTableKey (record, index) {
      return index
    },
    del (data, index) {
      let _this = this
      this.showDialog({
        title: '提示',
        msg: '确认删除吗',
        lBtnText: '取消',
        rBtnText: '确认',
        confCallBack () {
          _this.list.splice(index, 1)
          _this.setListKey()
        }
      })
    },
    setListKey () {
      this.list.forEach((v, k) => { v.key = k + 1 })
    },
    add () {
      if (this.list.length > 15) {
        this.$message.warning('最多15人')
        return false
      }
      if (this.enableAdd) {
        let obj = {
          name: '',
          sex: '',
          generateage: '',
          jszchen: '',
          whcdu: '',
          gzdanwei: '',
          cgczxgongxian: '',
          editable: 1,
          addFlag: 1
        }
        this.setListKey()
        this.list.push(obj)
        this.enableAdd = !this.enableAdd
      }
    },
    getKJCXFormDataById () {
      this.$http.queryCgjdForm({ id: this.formId }).then(res => {
        // this.formData = res.data
        if (res.data.mainrensjson) {
          let list = JSON.parse(res.data.mainrensjson)
          list.forEach((v, index) => {
            v.key = index + 1
            v.editable = 0
          })
          this.list = list
        }
      })
    },
    memberStepForm () {
      this.$http.persistCgjdForm(Object.assign({}, {
        id: this.formId,
        mainrensjson: JSON.stringify(this.list.map(v => {
          return {
            name: v.name,
            sex: v.sex,
            generateage: v.generateage,
            jszchen: v.jszchen,
            whcdu: v.whcdu,
            gzdanwei: v.gzdanwei,
            cgczxgongxian: v.cgczxgongxian
          }
        }))
      })).then(res => {
        this.formId = res.data.id
        if (this.type == 1) {
          this.$router.push({ path: `/innovation/supplier/5?id=${res.data.id}` })
        }
      })
    },
    handleChange (value, key, column, index) {
      const newData = [...this.list]
      const target = newData[index]
      if (target) {
        target[column] = value
        this.list = newData
      }
    },
    handleChange1 (value, column, index) {
      const newData = [...this.list]
      const target = newData[index]
      if (target) {
        target.generateage = formatTimeAmt(value, "yyyy-MM-dd")
        this.list = newData
      }
    },
    edit (key, index) {
      const newData = [...this.list]
      const target = newData[index]
      if (target) {
        target.editable = 1
        this.list = newData
      }
      Object.assign(this.cacheData, key)
    },
    saveTable (data) {
      data.editable = 0
      this.enableAdd = 1
      this.setListKey()
    },
    cancel (record, index) {
      if (record.addFlag) {
        this.list.splice(index, 1)
        this.setListKey()
      } else {
        record.editable = 0
        Object.assign(record, this.cacheData)
      }
      this.enableAdd = 1
    },
    handleSubmit (e) {
      let _this = this
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          _this.memberStepForm(values)
        }
      })
    },
    resetForm () {
      this.list = []
    }
  }
}
</script>
<style lang="scss">
</style>
